<template>
	<view class="content">
		<view class="newsList">
			<view class="newsItem" v-for="(item,index) in newsList" :key="index" @click="toDetail(index)">
				<view class="newsItemL">
					<text class="T1">{{item.title}}</text>
					<text class="T2">{{item.publishDate.slice(0,10)}}</text>
				</view>
				<image :src="item.image" style="width: 150rpx;height: 122rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/login';
export default {
	data() {
		return {
			userId:'',
			newsList:[],
			currentIndex:0, //当前所在的位置
			moveLength:10, //需要的条数
		};
	},
	onLoad(option) {
		let userId = this.$store.state.userInfo.currentUser.userId;
		// 默认初始加载 10条最新的数据
		this.getNewsInfo(this.currentIndex,this.moveLength);
	},
	// 页面触底事件监听
	onReachBottom() {
		console.log('onReachBottom');
		this.getNewsInfo(this.currentIndex,this.moveLength);
	},
	methods: {
		getNewsInfo(startWith,moveLength){
			let that = this;
			let data ={
				userId:that.$store.state.userInfo.currentUser.userId,
				action:'getContent',
				params:{
					channelName:"新闻资讯",
					startWith:startWith,
					moveLength:moveLength
				}
			};
			api.getContent(data).then(function(res) {
				console.log('getContent success',res);
				if(res.data.code == 2000){
					that.newsList = res.data.data.Content;
					that.currentIndex+=res.data.data.Content.length;
				}
			})
			.catch(function(error) {
				console.log('getContent fail', error);
			});
		},
		// 跳转到详情页面
		toDetail(index){
			let that = this;
			uni.navigateTo({
				url:'../contentDetail/contentDetail?url='+that.newsList[index].accessUrl
			});
		},
	}
};
</script>

<style>
page {
	background-color: #FAFAFA;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.newsList{
	margin-top: 36rpx;
	width: 700rpx;
	height: 100%;
	border-radius: 15rpx;
	background-color: #FFFFFF;
}
.newsItem{
	margin: 50rpx 35rpx 0;
	/* width: 100%; */
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.newsItemL{
	width: 435rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}
.T1{
	font-size: 34rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.T2{
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #999999;
}
</style>
